<template>
	<view class="container">
		<image src="/static/images/mine/top.png" class="full-width" mode="widthFix"></image>
		<view class="header">
			<view class="m-t26 flex justify-between align-start">
				<view class="flex">
					<image :src="userInfo.avatar" class="width-56 height-56 round bg-white" mode=""
						@click="handleToPage('/pages/mine/auth/dada/identity')"></image>
					<view class="flex flex-direction justify-center m-l12">
						<text class="text-bold f-s16 line-height22">{{userInfo.nickname || '-'}}</text>
						<text class="m-t8">ID：{{maskPhone(userInfo.mobile)}}</text>
					</view>
				</view>
				<view class="">
					<image src="/static/images/mine/service.png" class="width-24 height-24" mode=""
						@click="handleToSerivce"></image>
					<image src="/static/images/mine/setting.png" class="width-24 height-24 m-l20" mode=""
						@click="handleToPage('./setting/index')"></image>
				</view>
			</view>
			<view class="m-t23 relative">
				<image src="/static/images/mine/header-1.png" class="full-width" style="height: 94rpx;" mode=""></image>
				<view class="absolute full-width full-height text-white p-lr12 flex align-center justify-between">

					<view class="">
						<text class="f-s12 line-height16 f-w400 m-r8">综合评分</text>
						<text class="text-bold f-s18 line-height22">{{userInfo.composite || 0}}</text>
					</view>
					<view class="">
						<text class="f-s12 line-height16 f-w400 m-r8">服务次数</text>
						<text class="text-bold f-s18 line-height22">{{userInfo.order_count || 0}}</text>
					</view>
					<view class="">
						<text class="f-s12 line-height16 f-w400 m-r8">打赏数</text>
						<text class="text-bold f-s18 line-height22">{{userInfo.reward_count || 0}}</text>
						<image src="/static/images/index/query.png" class="width-14 height-14 m-l3" mode="widthFix"
							@click="$toast('统计近90天数据')"></image>
					</view>
				</view>

			</view>

		</view>
		<view class="main" style="">
			<view class="radius bg-white p-b15">
				<view class="p-lr12 p-t12 flex justify-between">
					<text class="line-height22 text-bold f-s15 text-dark">我的资产</text>
					<view class="flex">
						<view class="assets-btn" @click="handleToPage('reward')" hover-class="pressed">
							<text>打赏记录</text>
						</view>
						<view class="assets-btn m-l8" @click="handleToPage('withdraw')" hover-class="pressed">
							<text>去提现</text>
						</view>
					</view>
				</view>
				<view class="m-t16 p-lr12 flex justify-between">
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">可提现(元)</text>
						<text class="m-t8 text-bold f-s20 line-height26 text-black">{{userInfo.balance || 0.00}}</text>
					</view>
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">可结算(元)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{userInfo.brokerage || 0.00}}</text>
					</view>
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">打赏收入(元)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{userInfo.reward_money || 0.00}}</text>
					</view>
				</view>
			</view>
			<view class="radius bg-white p-b14 m-t10">
				<view class="p-lr12 p-t12">
					<text class="line-height22 text-bold f-s15 text-dark">我的认证</text>
				</view>
				<view class="menu m-t12">
					<view class="menu-item" v-for="(item,index) in authList" :key="index"
						@click="handleToPage(item.path)">
						<image :src="item.icon" class="icon" mode=""></image>
						<view class="title">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="radius bg-white p-b14 m-t10">
				<view class="p-lr12 p-t12">
					<text class="line-height22 text-bold f-s15 text-dark">常用功能</text>
				</view>
				<view class="menu m-t12">
					<view class="menu-item" v-for="(item,index) in menuList" :key="index"
						@click="handleToPage(item.path)">
						<image :src="item.icon" class="icon" mode=""></image>
						<view class="title">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Modal :show.sync="phonenumberModal" title="我的接单号码" cancelText="修改手机号" confirmText="我知道了"
			@cancel="handleToUpdatePhonenumber">
			<view>
				<text class="text-bold line-height42 f-s32">{{formatPhoneNumber(userInfo.order_mobile)}}</text>
			</view>
		</Modal>
		<Toast></Toast>
	</view>
</template>

<script>
	import Modal from "@/components/modal/index.vue"
	import {
		mapState
	} from "vuex"
	import toService from "@/config/toService.js"
	export default {
		name: "",
		components: {
			Modal
		},
		data() {
			return {
				phonenumberModal: false,
				authList: [{
					title: '搭搭认证',
					icon: '/static/images/mine/auth-1.png',
					path: '/pages/mine/auth/dada'
				}, {
					title: '学历认证',
					icon: '/static/images/mine/auth-2.png',
					path: '/pages/mine/auth/educational-background'
				}, {
					title: '才艺认证',
					icon: '/static/images/mine/auth-3.png',
					path: '/pages/mine/auth/accomplishment'
				}, {
					title: '线下认证',
					icon: '/static/images/mine/auth-4.png',
					path: '/pages/mine/auth/offline'
				}],
				menuList: [{
						title: '服务设置',
						icon: '/static/images/mine/col-1.png',
						path: '/pages/mine/menu/service'
					}, {
						title: '行程记录',
						icon: '/static/images/mine/col-2.png',
						path: '/pages/index/ride-recorder'
					}, {
						title: '车费明细',
						icon: '/static/images/mine/col-3.png',
						path: '/pages/index/fare-statictics'
					}, {
						title: '提现绑定',
						icon: '/static/images/mine/col-4.png',
						path: '/pages/index/capital/withdraw-bind'
					}, {
						title: '推广大使',
						icon: '/static/images/mine/col-5.png',
						path: 'reward-index'
					},
					{
						title: '内购商城',
						icon: '/static/images/mine/col-6.png',
						path: '/pages/mine/menu/shopping'
					},
					{
						title: '接单号码',
						icon: '/static/images/mine/col-7.png',
						path: 'update-phonenumber'
					}, {
						title: '打赏记录',
						icon: '/static/images/mine/col-8.png',
						path: 'reward'
					}, {
						title: '在线统计',
						icon: '/static/images/mine/col-9.png',
						path: '/pages/mine/menu/online-statistics'
					},
					// {
					// 	title: '异地签证',
					// 	icon: '/static/images/mine/col-10.png',
					// 	path: '/pages/mine/menu/visa'
					// }, 
					{
						title: '解约',
						icon: '/static/images/mine/col-11.png',
						path: '/pages/mine/menu/termination'
					},
					{
						title: '发布动态',
						icon: '/static/images/mine/col-12.png',
						path: '/pages/mine/menu/post'
					}, 
					// {
					// 	title: '押金记录',
					// 	icon: '/static/images/mine/col-13.png',
					// 	path: '/pages/mine/menu/cash-pledge'
					// }, 
					{
						title: '官方客服',
						icon: '/static/images/mine/col-14.png',
						path: 'service'
					}, {
						title: '问题反馈',
						icon: '/static/images/mine/col-15.png',
						path: '/pages/mine/menu/feedback'
					}
				]
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo || {}
			})
		},
		methods: {
			maskPhone(phone) {
				return String(phone).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			formatPhoneNumber(phoneNumber = "") {
				// 去除所有非数字字符
				const cleaned = phoneNumber.replace(/\D/g, '');
				// 校验是否为11位手机号
				if (cleaned.length !== 11) {
					return ''
					throw new Error("手机号长度不正确");
				}
				// 格式化为 3 4 4 的格式
				return cleaned.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
			},
			handleToSerivce() {
				toService()
				// this.$modal.makePhone(getApp().globalData.config.SERVICE_TEL)
			},
			handleToUpdatePhonenumber() {
				this.$tab.navigateTo('/pages/mine/menu/update-phonenumber')
			},
			handleToPage(path) {
				switch (path) {
					case 'withdraw':
						this.$tab.navigateTo('/pages/index/capital/withdraw-deposit')
						break;
					case 'reward':
						this.$tab.navigateTo('/pages/index/capital/reward')
						break;
					case 'update-phonenumber':
						this.phonenumberModal = true
						break;
					case 'reward-index':
						this.$tab.switchTab('/pages/reward/index')
						break;
					case 'service':
						this.handleToSerivce()
						// this.$modal.makePhone(getApp().globalData.config.SERVICE_TEL)
						break;
					default:
						this.$tab.navigateTo(path)
						break;
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			box-sizing: border-box;
			padding: 32rpx;
			padding-top: var(--status-bar-height);

		}

		.main {
			position: relative;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			margin-top: calc(-188rpx + var(--status-bar-height));
			background-color: #F5F6F7;
			// z-index: 999;
			width: 100%;
			// height: 600rpx;
			padding: 24rpx;
			box-sizing: border-box;

			.assets-btn {
				width: 128rpx;
				height: 48rpx;
				background-color: #fff;
				border-radius: 24rpx;
				border: 1rpx solid #FE3F59;
				color: #FE3F59;
				font-weight: 400;
				font-size: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.menu {
				background-color: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 25%;
					margin-bottom: 32rpx;

					&:nth-last-child(-n+4) {
						margin-bottom: 0;
					}

					.icon {
						width: 60rpx;
						height: 60rpx;
					}

					.title {
						font-weight: 400;
						font-size: 24rpx;
						color: #222426;
						line-height: 34rpx;
						margin-top: 16rpx;
					}
				}
			}

			.inform {
				background-color: #fff;
				border-radius: 36rpx;
				border: 2rpx solid #FFFFFF;
				height: 72rpx;
				margin-top: 20rpx;
				display: flex;

				&>image {
					width: 148rpx;
					height: 72rpx;
					flex-shrink: 0;
				}

				.inform-content {
					width: 100%;
					padding-right: 24rpx;
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.cell {
				margin-top: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 0 30rpx;
				box-sizing: border-box;

				.cell-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 38rpx 0;

					.cell-content {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding-left: 20rpx;
						box-sizing: border-box;
					}
				}
			}

			.notice {
				margin-top: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 24rpx 24rpx 32rpx 24rpx;
				box-sizing: border-box;

				.notice-item {
					margin-bottom: 48rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>